<template>
  <header class="navbar blur">
    <div class="navbar-left">
      <img class="logo" src="http://dclouddoc.huangbaoze.com/img/logo.png" alt=""></img>
      <span class="site-name">麟芯测试云平台</span>
    </div>
    <div class="navbar-right">
      <van-search
        v-model="searchValue"
        placeholder=""
        shape="round"
        @search="onSearch"
        class="search-box"
      />
      <div class="nav-links">
        <a href="#" class="guide-link">使用指南</a>
        <a href="#" class="guide-link">体验平台</a>
      </div>
    </div>
  </header>
</template>
<script setup>
import { ref, reactive } from 'vue'

const searchValue = ref('')
const onSearch = () => {

}


</script>

<style scoped lang='scss'>
.navbar {
  padding: .7rem 1.5rem;
  line-height: 2.2rem;
  transition: transform .3s;

  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 3.6rem;
  background-color: rgba(255,255,255,.98);
  box-sizing: border-box;
  box-shadow: 0 2px 5px rgba(0,0,0,.06);
  display: flex;
  justify-content: space-between;
  color: #00323c;
  .navbar-left {
    .logo {
      height: 2.2rem;
      vertical-align: middle;
    }
    .site-name {
      font-size: 1.3rem;
      font-weight: 600;
      color: #00323c;
      vertical-align: middle;
      margin-left: 0.8rem;
    }
  }
  .navbar-right {
    display: flex;
    .nav-links {
      .guide-link {
        margin-left: 1rem;
        font-size: 0.9rem;
        border-bottom: 2px solid transparent;
        padding-bottom: 0.2rem;
        &:hover {
          border-bottom: 2px solid #13b9e2;
        }
      }
    }
    :deep() {
      .van-search__content {
        background: #ececec;
      }
    }
  }
}
</style>